<style type="text/css">
/* 不可用雙斜線 // 作註解 */
:root {
  --xBKColor: <%=Session("BKColor")%>;            /* 背景色較淺 */
  --xBKColor2: <%=Session("BKColor2")%>;          /* 背景色較深 */

  --xColor: <%=Session("Color")%>;                /* <TR>較淺 */
  --xColor1: <%=Session("Color1")%>;              /* <TR>較深 */
  --xBorderColor: <%=Session("BorderColor")%>;    /* 框線顏色 */
  --xBorderColor2: <%=Session("BorderColor2")%>;  /* 頁數框線顏色 */

  --xColor2: <%=Session("Color2")%>;              /* 標題顏色較淺 */
  --xColor3: <%=Session("Color3")%>;              /* 標題顏色較深 */
  --xTFColor: <%=Session("TFColor")%>;            /* 標題文字顏色最深 */
}

.button-area
{font-size:16px;
 //background-color: #e7e7e7; 
 display: flex;
 justify-content: space-around; /*center; 每個物件 均分布置*/ 
 align-items: center; 
 text-align:center;        /*字水平居中 */ 
 float:left;               /* 水平排列 */
 padding:5px 5px 5px 5px;  /* 上 右 下 左; */
}

/*--- 子視窗固定於頁面底部不捲動 ---*/
.sub-button-bottomarea
{height:35px;
 width:100%;
 font-size:16px;
 display: flex;
 justify-content: space-around; /*center; 每個物件 均分布置*/ 
 align-items: center; 
 text-align:center;        /*字水平居中 */ 
 float:left;               /* 水平排列 */
 padding:5px 5px 5px 5px;  /* 上 右 下 左; */
 /*background-color: #e7e7e7; */
 background:linear-gradient(var(--xColor3),var(--xColor2)); /*背景漸層*/
 bottom: 10;
 position:fixed;        /*固定位置，不會被捲動 */
}

/*--- 固定於頁面底部不捲動 ---*/
.button-bottomarea
{height:35px;
 width:100%;
 font-size:16px;
 display: flex;
 justify-content: space-around; /*center; 每個物件 均分布置*/ 
 align-items: center; 
 text-align:center;        /*字水平居中 */ 
 float:left;               /* 水平排列 */
 padding:5px 5px 5px 5px;  /* 上 右 下 左; */
 /*background-color: #e7e7e7; */
 background:linear-gradient(var(--xColor3),var(--xColor2)); /*背景漸層*/
 bottom:0;
 z-Index:800; 
 position:fixed;        /*固定位置，不會被捲動 */
}

/*--- 固定於頁面底部不捲動 ---*/
.center-bottomarea
{height:35px;
 width:100%;
 font-size:16px;
 display: flex;
 justify-content: space-around; /*center; 每個物件 均分布置*/ 
 align-items: center; 
 text-align:center;        /*字水平居中 */ 
 float:left;               /* 水平排列 */
 padding:5px 5px 5px 5px;  /* 上 右 下 左; */
 /*background-color: #e7e7e7; */
 background:linear-gradient(var(--xColor3),var(--xColor2)); /*背景漸層*/
 bottom:0;
 z-Index:800; 
}
/*--- 固定於頁面上部不捲動 ---*/
.button-toparea
{height:30px;
 width:100%;
 font-size:16px;
 display: flex;
 justify-content:flex-start;  /* 每個物件 左起布置*/ 
 align-items: center; 
 text-align:center;        /*字水平居中 */ 
 float:left;               /* 水平排列 */
 padding:5px 5px 5px 5px;  /* 上 右 下 左; */
 /*background-color: #e7e7e7; */
 background:linear-gradient(var(--xColor3),var(--xColor2)); /*背景漸層*/
 top: 0;
 position:fixed;        /*固定位置，不會被捲動 */
 z-Index:800; 

}

/*--- 元件居中布置 ---*/
.button-centerarea
{height:30px;
  width:100%;
 font-size:16px;
 display: flex;
 justify-content:center; /* 每個物件 居中布置*/ 
 align-items: center; 
 text-align:center;        /*字水平居中 */ 
 float:left;               /* 水平排列 */
 padding:5px 5px 5px 5px;  /* 上 右 下 左; */
 /*background-color: #e7e7e7; */
 /*background:linear-gradient(var(--xBKColor),var(--xBKColor2));*/ /*背景漸層*/
 
}

/* ------- 按鈕一(大型鈕) ------- */ 
.button-k1
{   width: 110px;
    height: 35px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    line-height:35px;            /*需與 height同值,字方可垂直居中，只在 DIV 有效 */
    font-family:微軟正黑體; 
    font-weight:bold;            /*normal=預設值，可以不用設定、bold=粗體字型、bolder=更粗的字型(跟bold似乎沒什麼差異) */
    color: #000;                 /*字顏色*/
    //background-color: #e7e7e7;                  /*transparent;*/
    background:linear-gradient(#e7e7e7, #a8a8a8); /*背景漸層*/
    border: 0px solid #000;
    border-radius: 5px;	                          /* 圓角度 */
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /*陰影 正值=右偏移(負值=左偏移),正值=下偏移(負值=上偏移), 模糊半徑, 擴散距離(略), (R,G,B,透明度) ,inset 內陰影 */
    transition: all .1s linear;
    float:left; /* 水平排列 */
    user-select: none; /* 防止文字被滑鼠選取反白 */
    margin-left:3px;
}

/*--- 游標指到作用 --- */
.button-k1:hover
{ //box-shadow:0px 0px 0px 0px #cccccc;           /*陰影*/
  color:#FFFFFF;                               /*白色字=#FFFFFF,紅色字=#f44336*/
  //background-color: var(--h1-color);
  /*background:linear-gradient(#a8a8a8, #e7e7e7);*/ /*背景漸層*/
  background:linear-gradient(#EA0000, #FF5151); /*背景漸層*/

}

/*--- 游標按下左鍵 --- */
.button-k1:active
{box-shadow:0px 0px 0px 0px #cccccc;           /*陰影*/
 /*box-shadow:2px 2px 2px rgba(0, 0, 0, 0.1) inset; */ /*陰影 正值=右偏移(負值=左偏移),正值=下偏移(負值=上偏移), 模糊半徑, 擴散距離(略), (R,G,B,透明度) ,inset 內陰影 */
 transform:translate(2px,2px);
 /* transform: translateY(2px);*/ /* 分開下參數 Y 無作用*/
 /* transform: translateX(2px);*/

}

/* ------- 按鈕一(小型鈕) ------- */ 
.button-k1s
{   width: 70px;
    height: 24px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    line-height:24px;            /*需與 height同值,字方可垂直居中 */
    font-family:微軟正黑體; 
    font-weight:bold;            /*normal=預設值，可以不用設定、bold=粗體字型、bolder=更粗的字型(跟bold似乎沒什麼差異) */
    font-size:14px;
    color: #000;                 /*字顏色*/
    //background-color: #e7e7e7;                  /*transparent;*/
    background:linear-gradient(#e7e7e7, #a8a8a8); /*背景漸層*/
    border: 0px solid #000;
    border-radius: 5px;	                          /* 圓角度 */
    /*box-shadow: 1px 1px 1px rgba(129, 0, 224, 0.4);*/ /*陰影 (R,G,B,透明度)*/
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); /*陰影 (R,G,B,透明度)*/
    transition: all .1s linear;
    float:left; /* 水平排列 */
    margin-left:3px;
    user-select: none; /* 防止文字被滑鼠選取反白 */
}

/*--- 游標指到作用 --- */
.button-k1s:hover
{ /*box-shadow:0px 0px 0px 0px #cccccc;*/            /*陰影*/
  color: #FFFFFF;                                        /*白色字*/
  /*background-color: var(--h1-color);*/
  /*background:linear-gradient(#a8a8a8, #e7e7e7);*/ /*背景漸層*/
  background:linear-gradient(#EA0000, #FF5151); /*背景漸層*/

}

/*--- 游標按下左鍵 --- */
.button-k1s:active
{ box-shadow:0px 0px 0px 0px #cccccc;           /*陰影*/
  transform:translate(1px,1px);
/*  transform: translateY(2px);*/
  /*transform: translateX(2px); */

}

/* 按鈕二(頁數鈕) */ 
.button-k2
{ position: relative;
  display: inline-flex;
  width: 25px;
  height: 25px;
  margin: 6px 2px 0px 2px;  /*margin:上 右 下 左;*/
  perspective: 1000px;
  
  font-size: 10px;
  letter-spacing: 1px;
  transform-style: preserve-3d;
  transform: translateZ(-12px);
  transition: transform .25s;
  font-family: 'Montserrat', sans-serif;
  user-select: none; /* 防止文字被滑鼠選取反白 */
  
}

.button-k2:before,
.button-k2:after{
  position: absolute;
  content: "" attr(data-before); 
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  box-sizing:Content-box; /*  border-box; */
  border-color:var(--xBorderColor2);
  border-radius: 5px;
}
.button-k2:after{
  color: #000;
  /*background: #000;*/
  transform: rotateY(0deg) translateZ(12px);
}

.button-k2:before{
  color:#fff;
  /*background:linear-gradient(0deg,#D26900,#844200);*/ /*背景漸層 (角度,上顏色，下顏色)*/
  background:linear-gradient(0deg,var(--xColor3),var(--xTFColor)); /*背景漸層 (角度,上顏色，下顏色)*/
  
  transform: rotateX(90deg) translateZ(12px);
}

.button-k2:hover{
  /*background:linear-gradient(0deg,#D26900,#844200);*/ /*背景漸層 (角度,上顏色，下顏色)*/
  background:linear-gradient(0deg,var(--xColor3),var(--xTFColor)); /*背景漸層 (角度,上顏色，下顏色)*/
  transform: translateZ(-12px) rotateX(-90deg);
}

.button-k2A
{ /*position: absolute;*/
  display: inline-flex;
  height: 26px;
  width: 26px;
  margin: 0 0 0 1.5px; /*margin:上 右 下 左;*/
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  color: red;

  border: 1px solid black;
  box-sizing: border-box;
  border-radius: 5px;
}


</style>